<template>
	<div class="ol-popup" ref="container" id="popup" v-show="isToggle">
		<a
			href="javascript:void(0)"
			@click="closePopup"
			class="ol-popup-closer"
		></a>
		<div id="popup-content">
			<div class="monitorId">摄像头：{{ content.编号 }}</div>
			<div class="monitoInfo">
				<table>
					<tr>
						<td>位置</td>
						<td>{{ content.位置 }}</td>
					</tr>
					<tr>
						<td colspan="2">
							<img src="@/assets/images/car.gif" alt="" />
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</template>
<script setup>
import {onMounted,getCurrentInstance,ref,watch} from 'vue'
import {Query}from'@/api/mapgis-api/Query'
import {createPopup}from'@/api/ol-api/popup'
import monitorUrl from '@/assets/images/monitoring.png'
const {proxy} = getCurrentInstance()
//接收父组件传递过来的值,控制让弹窗显示
const props = defineProps({
    isToggle:{
        type:Boolean,
    }
})
const monitorData = ref(null);//转换后mapgis数据
const container  =ref('');//popup位置
const content = ref("");//存放监控数据
let popup = null;
let map = null;
let service = {
    docName : import.meta.env.VITE_MAPGIS_DOC_NAME,
    layerId:3,
}
onMounted(() => {
    map = proxy.$map;
    //获取mapgis中摄像头数据,转换为ol数据,并添加到地图上
    Query.queryByLayerId(service).then((features)=>{
        //ol转Jeojson数据
        monitorData.value = new ol.format.GeoJSON().writeFeaturesObject(features);
        //创建数据源
        let source = new ol.source.Vector({
            features: new ol.format.GeoJSON().readFeatures(monitorData.value)
        })
        //创建图层
        const layer_monitor = new ol.layer.Vector({
            source,
            style:setMonitorStyle(monitorUrl)
        })
        //隐藏监控图层
        layer_monitor.setVisible(false)
        watch(()=>{
            return props.isToggle
        },(value)=>{
            layer_monitor.setVisible(value)
        })
        map.addLayer(layer_monitor);
        //设置弹窗
        popup = createPopup({
            container:container.value,
            map,
        })
        //map添加鼠标移动事件监听,当鼠标移动到元素的上的时候会显示手形
        map.on('pointermove',function(e){
            var pixel = map.getEventPixel(e.originalEvent);
            var hit = map.hasFeatureAtPixel(pixel);
            map.getTargetElement().style.cursor = hit?'pointer':'';
        })
        //为map添加点击事件监听
        map.on('click',function(e){   
            //获取当前点击的点是否存在要素,并返回
            const feature = map.forEachFeatureAtPixel(e.pixel,function(feature,layer){
                //判断一次啊点击的图层时监控图层 方式上报公告事件穿透导致弹出监控弹窗
                if(layer===layer_monitor){
                    return feature
                }
            });
            if(feature){
                //弹窗显示
                let center = e.coordinate;
                //弹窗内容
                content.value = feature.values_.values_;
                popup.setPosition(center)
            }
        })
    })

})
//设置监控图层样式
function setMonitorStyle(url){
    return new ol.style.Style({
        // {ol.style.IconOption} 类型
        image:new ol.style.Icon({
            anchor:[0.5,100],
            anchorOrigin:"center",
            anchorXUnits:'fraction',
            anchorYUnits:'pixels',
            offsetOrigin:"center",
            //图标缩放比例
            scale:0.15,
            opacity:1,
            src:url,
        })
    })
}
const closePopup = ()=>{
   popup.setPosition(null) 
}
</script>

<style lang="scss" scoped>
.ol-popup {
  box-sizing: border-box;
  position: absolute;
  width: 250px;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  /* padding: 15px; */
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 100px;
  z-index: 10000;
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 50%;
  transform: translateX(-50%);
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}

.ol-popup-closer:after {
  content: '✖';
}

#popup-content {
  font-size: 14px;
  font-family: '微软雅黑';
  .monitorId {
    height: 30px;
    background-color: #2196f3;
    color: white;
    line-height: 30px;
    border-radius: 5px 5px 0 0;
    padding: 0 5px;
  }
  .monitoInfo {
    padding: 5px;
    table {
      width: 100%;
      border-collapse: collapse;
      tr {
        height: 30px;
        border: 1px solid #ccc;
      }
      td {
        height: 30px;
        border: 1px solid #ccc;
        padding: 5px 5px 0 5px;
        text-align: center;
        line-height: 30px;
      }
      img {
        width: 100%;
        height: 120px;
        margin-top: 5px;
      }
    }
  }
}

#popup-content .markerInfo {
  font-weight: bold;
}
</style>
